<template>
    <div style="height:100%;width:100%;" class="detail">
        <bar class="bar" @on-back="$router.back()" title="我的IC卡">
            <div slot="right" @click="$router.push('/icSearch')">筛选</div>
        </bar>
        <div style="justify-content: space-between" class="detail-bar">
            <span class="youba-primary-grey">{{pageNumShow}}</span>
        </div>
        <scroll :pulldown="pulldown" ref="myScroller" style="height: calc(100% - 90px)"
                :total="total"
                @on-infinite="getData"
                @pullingDown="pullingDown">
            <swipeout class="detail-block" transition-mode="follow">
                <swipeout-item transition-mode="follow" v-for="(item, index) in cardList" :key="index"
                               class="detail-block-box list-block vux-tap-active"
                               :class="{'list-night': item.status === 2}" :right-menu-width="210">
                    <div slot="right-menu">
                        <swipeout-button type="primary" @click.native="$router.push('/account/'+ which +'/' + index)">
                            充值
                        </swipeout-button>
                    </div>
                    <div slot="content" class="demo-content vux-1px-t flexa vux-tap-active">
                        <div class="detail-box-left flexa flex-1"
                             @click="$router.push('/icUserInfo/'+ which +'/' + index)">
                            <div class="detail-box-name"
                                 :style="{backgroundColor: $util.getColor(item.color)}">
                                {{item.userName && item.userName.substring(0, 1)}}
                            </div>
                            <div style="margin-left: 10px; flex:1">
                                <div class="detail-left-time">{{item.cardId}}</div>
                                <div>{{item.userName}}</div>
                            </div>
                            <div style="line-height:40px;font-size:18px;margin-right:5px">
                                {{item.balance}}
                            </div>
                        </div>
                    </div>
                </swipeout-item>
            </swipeout>
        </scroll>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../../store/constants.vue'
    import scroll from '../../../components/scroll.vue'
    import {PopupRadio} from 'vux'
    import {
        Bar,
        Checker,
        Layout,
        InputControl,
        Mask
    } from 'muka-ui'
    import {
        Group,
        CellBox,
        XButton,
        GroupTitle,
        Swipeout,
        SwipeoutItem,
        SwipeoutButton,
        XInput,
        Confirm,
        Msg,
        Divider,
        InlineLoading,
        Popup
    } from 'vux'
    import md5 from 'js-md5'

    export default {
        name: 'help',
        components: {
            Bar,
            Group,
            CellBox,
            XButton,
            Checker,
            GroupTitle,
            Swipeout,
            SwipeoutItem,
            SwipeoutButton,
            InputControl,
            Layout,
            XInput,
            'mu-mask': Mask,
            Confirm,
            Msg,
            Divider,
            InlineLoading,
            Popup,
            scroll,
            PopupRadio,
        },
        data: function () {
            return {
                pulldown: true,
                //路由参数
                which: 1,
                pageNumShow: '',

                pageSize: 20,
                total: 0,
                pageNum: 1,
            }
        },
        created: function () {
            this.getData(1)
        },
        computed: mapState([
            VUEX_NAME.cardList
        ]),
        methods: {
            ...mapMutations([
                VUEX_NAME.cCardList
            ]),
            pullingDown: function (pageNum, done) {
                this.$ajax(
                    'card/myCardsPlus',
                    {
                        pageNum: pageNum,
                        pageSize: 20,
                    },
                    (content) => {
                        this.total = content.totalCount
                        this.cCardList(content.resultList)

                        this.pageNumShow = ((pageNum - 1) * 20 + 1) + "—" + ((pageNum - 1) * 20 + 60) + '条'

                        if (done) {
                            done()
                        }
                    })
            },

            //获取分页数据
            getData: function (pageNum, done) {
                this.$ajax(
                    'card/myCardsPlus',
                    {
                        pageNum: pageNum,
                        pageSize: this.pageSize,
                    },
                    (content) => {
                        this.total = content.totalCount

                        if ((pageNum - 1) % 3 === 0) {
                            this.pageNumShow = ((pageNum - 1) * 20 + 1) + "—" + ((pageNum - 1) * 20 + 60) + '条'
                            this.$refs.myScroller.scrollTo()

                            this.cCardList([])
                        }

                        this.cCardList(this.cardList.concat(content.resultList))

                        if (done) {
                            done()
                        }
                    })
            }
        }
    }

</script>

<style lang="less" scoped>
    .circled {
        font-size: 18px !important;
        width: 20px !important;
    }

    .detail-block-box {
        border-bottom: 1px solid #D9D9D9;
    }

    .detail-cell-box {
        .detail-box-right {
            position: absolute;
            right: -15px;
            top: -10px;
            background-color: #44b549;
            color: white;
            line-height: 59px !important;
            width: 59px;
            text-align: center !important;
        }
        .no-select {
            color: #d1d1d1;
            background-color: inherit;
        }
    }

    .detail-bar-right {
        .ic-select {
            color: #44b549;
        }
    }

    .night {
        background: #D23934 !important;

    }

    .list-night {
        color: #ccc !important;
        .detail-box-name {
            background: #ccc !important;
        }
    }

    .list-block {
        padding: 10px 15px;
    }


</style>
